<template>
  <a-popover
    v-model="visible"
    trigger="click"
    placement="bottomRight"
    overlayClassName="header-notice-wrapper"
    :autoAdjustOverflow="true"
    :arrowPointAtCenter="true"
    :overlayStyle="{ width: '300px', top: '50px' }"
  >
    <template slot="content">
      <a-spin :spinning="loadding">
        <a-tabs>
          <a-tab-pane key="1" style="max-height: 450px; overflow:auto;">
            <template slot="tab">
              <a-badge :offset="[6, 0]" :count="Recordlists.length" title="报警">报警</a-badge>
            </template>
            <a-list>
              <router-link v-for="item in Recordlists" :key="item.id" :to="{ name: 'AlertdetailForm',params: { id: item.id } }" >
                <a-list-item>
                <!-- @click="getData" -->
                  <a-list-item-meta :title="item.trigger_name" :description="item.created_at">
                    <a-avatar size="large" style="background-color: #fe5d58;color: #fff;" slot="avatar" icon="alert" />
                  </a-list-item-meta>
                </a-list-item>
              </router-link>
            </a-list>
          </a-tab-pane>
          <a-tab-pane key="2" style="max-height: 450px; overflow:auto;">
            <template slot="tab">
              <a-badge :offset="[6, 0]" :count="NewsLength" title="消息">消息</a-badge>
            </template>
            <a-list>
              <!-- @click="getData" -->
              <router-link v-for="item in Newslists" :key="item.id"  :to="{ name: 'NewsDetail',params: { id: item.id } }">
                <a-list-item>
                  <a-list-item-meta :title="item.title" :description="item.created_at">
                    <a-avatar v-if="item.is_read == 1" size="large" style="background-color: #1890ff;color: #fff;" slot="avatar" icon="mail" />
                    <a-avatar v-else size="large" style="background-color: #fe5d58;color: #fff;" slot="avatar" icon="mail" />
                  </a-list-item-meta>
               </a-list-item>
              </router-link>
            </a-list>
          </a-tab-pane>
          <!-- <a-tab-pane tab="待办" key="3">
            123
          </a-tab-pane> -->
        </a-tabs>
      </a-spin>
    </template>
    <span @click="fetchNotice" class="header-notice">
      <a-badge :count="count">
        <a-icon style="font-size: 16px; padding: 4px" type="bell"/>
      </a-badge>
    </span>
  </a-popover>
</template>
<script>
import { unread, alarmRecord } from '@/api/passport';
export default {
  name: 'HeaderNotice',
  data() {
    return {
      loadding: false,
      visible: false,
      Newslists: [],
      Recordlists: [],
    };
  },
  computed: {
    count() {
      return this.NewsLength + this.Recordlists.length
    },
    NewsLength(){
      let number = 0
      this.Newslists.map(item=>{
        if (item.is_read != 1) {
          number++
        }
      })
      return number
    }
  },
  mounted(){
    this.getData()
    // setInterval(() => {
    //   this.getData()
    // },1000*10)
  },
  methods: {
    getData(){
      unread().then(res => {
        if (res.data.errorCode === 0) {
            this.Newslists = res.data.result
        }
      })
      alarmRecord().then(res => {
        if (res.data.errorCode === 0) {
            this.Recordlists = res.data.result.reverse()
        }
      })
    },
    fetchNotice() {
      if (!this.visible) {
        this.loadding = true;
        setTimeout(() => {
          this.getData()
          this.loadding = false;
        }, 1000);
      } else {
        this.loadding = false;
      }
      this.visible = !this.visible;
    },
  },
};
</script>
<style lang="stylus" scoped>
  >>> .header-notice-wrapper
    top: 50px !important;

  .header-notice
    display: inline-block;
    transition: all 0.3s;

    span
      vertical-align: initial;
</style>
